<template>
  <div class="vue-box sbot">
    <!-- ------- 内容部分 ------- -->
    <div class="c-panel">
      <!-- ------------- 检索参数 ------------- -->
      <div style="font-weight: bold; margin: 10px 0;">检索参数</div>
      <el-form ref="form" :model='p' @submit.native.prevent>
        <sa-item type="text" name="模糊搜索" v-model="p.search"></sa-item>
        <sa-item type="text" name="登陆IP" v-model="p.ip"></sa-item>
        <div class="c-item">
          <el-button type="primary" icon="el-icon-search" @click="p.current = 1; f5()">查询</el-button>
        </div>
      </el-form>
      <!-- ------------- 快捷按钮 ------------- -->
      <sa-item type="fast-btn" show="export,delete,reset"></sa-item>
      <div style="height: 10px;"></div>
      <!-- ------------- 数据列表 ------------- -->
      <el-table class="data-table" ref="data-table" :data="dataList" border>
        <sa-td type="selection"></sa-td>
        <sa-td name="序号" type="index" width="80px"/>
        <sa-td name="登录账号" width="120px">
          <template slot-scope="s">
            <img :src="s.row.adminAvatar" @click="sa.showImage(s.row.adminAvatar, '400px', '400px')" class="td-img"
              style="vertical-align: middle; margin-right: 5px;" />
            <b style="font-weight: 400;">{{ s.row.adminName }}</b>
          </template>
        </sa-td>
        <sa-td name="IP" prop="loginIp" width="100px"></sa-td>
        <sa-td name="客户端" prop="device" width="100px"></sa-td>
        <sa-td name="所属系统" prop="systemBy" width="100px"></sa-td>
        <sa-td name="登录地" prop="address" width="120px"></sa-td>
        <sa-td name="TOKEN" prop="accToken">
        </sa-td>
        <sa-td name="登录时间" width="220px">
          <template slot-scope="s">
            <span>{{ sa.forDate(s.row.createTime, 2) }}</span> -
            <b style="color: green;">{{ sa.isNull(sa.forDate2(s.row.createTime), '无') }}</b>
          </template>
        </sa-td>
        <sa-td name="操作" fixed="right" width="120px">
          <template slot-scope="s">
            <el-button class="c-btn" type="danger" icon="el-icon-delete" @click="del(s.row)">删除</el-button>
          </template>
        </sa-td>
      </el-table>
       <!-- 分页 -->
       <div v-if="dataCount">
        <sa-item type="page" :curr.sync="p.current" :size.sync="p.size" :total="dataCount" @change="f5()" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'acc-log-list',
  props: { param: Object },
  data() {
    return {
      // 查询参数
      p: {
        // 当前页
        current: 1,
        // 页大小
        size: 10,
        // 排序方式
        sortField: 'id desc',
        // 管理员id
        search: this.param.search || null,
        // 登陆IP
        ip: null,
      },
      dataCount: null,
      // 数据集合
      dataList: [], 
    }
  },
  created: function () {
    this.f5();
    sa.onInputEnter();
  },
  methods: {
    // 刷新
    f5: function () {
      sa.ajax('/sso/log/getList', sa.removeNull(this.p), function (res) {
        // 数据
        this.dataList = res.data;
        // 数据总数
        this.dataCount = res.dataCount;
        // 刷新表格高度
        sa.f5TableHeight();
      }.bind(this));

    },
    // 删除
    del: function (data) {
      sa.confirm('是否删除，此操作不可撤销', function () {
        sa.ajax('/sso/log/delete', { "id": data.id }, function (res) {
          sa.ok('删除成功');
          this.f5();
        }.bind(this), { type: 'get' })
      }.bind(this));
      // 刷新表格高度
      sa.f5TableHeight();
    },
    // 批量删除
    deleteByIds: function () {
      // 获取选中元素的id列表
      let selection = this.$refs['data-table'].selection;
      let ids = sa.getArrayField(selection, 'id');
      if (selection.length === 0) {
        return sa.msg('请至少选择一条数据')
      }
      // 提交删除
      sa.confirm('是否批量删除选中数据？此操作不可撤销', function () {
        sa.ajax('/sso/log/deleteByIds', { ids: ids }, function (res) {
          sa.ok('删除成功');
          this.f5();
        }.bind(this), { type: 'post' })
      }.bind(this));
      // 刷新表格高度
      sa.f5TableHeight();
    },
  },

}
</script>

<style scoped>
/*.vue-box{padding: 0; height: 100%; background-color: #FFF;}*/
</style>
